import 'package:flutter/material.dart';

/// 线宽选择器
class StrokeWidthSelector extends StatelessWidget {
  final List<double> supportStrokeWidths;
  final int activeIndex;
  final Color color;
  final ValueChanged<int> onSelect;

  const StrokeWidthSelector({super.key,
    required this.supportStrokeWidths,
    required this.activeIndex,
    required this.color,
    required this.onSelect});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: List.generate(
            supportStrokeWidths.length, (index) => _buildByIndex(index)),
      ),
    );
  }

  Widget _buildByIndex(int index) {
    bool select = index == activeIndex;
    return GestureDetector(
      onTap: () => onSelect(index),
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 2),
        width: 70,
        height: 18,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: select ? Border.all(color: Colors.blue) : null),
        child: Container(
          width: 50,
          color: color,
          height: supportStrokeWidths[index],
        ),
      ),
    );
  }
}

/// 颜色选择器
class ColorSelector extends StatelessWidget {
  final List<Color> supportColors;
  final int activeIndex;
  final ValueChanged<int> onSelect;

  const ColorSelector({super.key,
    required this.supportColors,
    required this.activeIndex,
    required this.onSelect});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
      child: Wrap(
        children: List.generate(
            supportColors.length, (index) => _buildByIndex(index)),
      ),
    );
  }

  Widget _buildByIndex(int index) {
    bool select = index == activeIndex;
    return GestureDetector(
      onTap: () => onSelect(index),
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 2),
        padding: const EdgeInsets.all(2),
        width: 24,
        height: 24,
        alignment: Alignment.center,
        decoration: BoxDecoration(shape: BoxShape.circle,
            border: select ? Border.all(color: Colors.blue) : null),
        child: Container(decoration: BoxDecoration(
            shape: BoxShape.circle, color: supportColors[index]),),
      ),
    );
  }
}
